import echarts from "echarts";
function opt(value) {
    const option = {
        title: [
            {
                text: '总收入',
                x: 'center',
                bottom: '38%',
                textStyle: {
                    fontSize: 13,
                    color: '#585b5c',
                }
            },
            {
                text: `${value}万`,
                x: 'center',
                top: '43%',
                textStyle: {
                    fontSize: 20,
                    color: '#fff',
                    fontWeight: '300'
                },
            },
        ],
        tooltip: {
            show: false,
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)',
            textStyle: {
                fontSize: 10
            },
        },
        color: ['#45494b', '#32b16c'],
        legend: {
            show: false,
            orient: 'horizontal',
            left: 'center',
            bottom: 0,
            data: ['类别一', '类别二', '类别三', '类别四'],
            textStyle: {
                color: '#fff'
            },
            icon: 'path://M512 0c282.752 0 512 229.248 512 512s-229.248 512-512 512S0 794.752 0 512 229.248 0 512 0z m0 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333z m0 213.333334a213.333333 213.333333 0 1 1 0 426.666666 213.333333 213.333333 0 0 1 0-426.666666z'
        },
        color: ["#2478b6", "#c2572d", "#66CCCC"],
        series: [
            {
                type: 'gauge',
                splitNumber: 8,
                center: ['50%', '50%'],
                radius: '80%',
                startAngle: 210,
                endAngle: -30,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: true,
                    lineStyle: {
                        width: 1.5,
                        color: '#4a5571',
                    },
                    length: 10,
                    splitNumber: 3
                },
                splitLine: {
                    lineStyle: {
                        opacity: 0
                    }
                },
                axisLabel: {
                    show: false
                },
                detail: {
                    show: false
                },
                pointer: {
                    show: false
                }
            },
            {
                type: 'gauge',
                center: ['50%', '50%'],
                radius: '105%',
                startAngle: 210,
                endAngle: -30,
                min: 0,
                max: 160,
                splitNumber: 8,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    distance: 5,
                    fontSize: 14,
                    color: '#fff',
                    backgroundColor: '#000',
                },
                itemStyle: {
                    show: false
                },
                detail: {
                    show: false
                },
                pointer: {
                    show: false,
                }
            },
            {
                name: '',
                type: 'custom',
                coordinateSystem: "none",
                data:[0],
                renderItem: function (params, api) {
                    return {
                        type: 'circle',
                        shape: {
                            cx: api.getWidth() / 2,
                            cy: api.getHeight() / 2,
                            r: Math.max(api.getWidth(), api.getHeight()) / 2 * 0.3,
                        },
                        style: {
                            stroke: '#1459a3',
                            lineWidth: 2,
                            fill: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                                {
                                    offset: 0,
                                    color: '#1a2127'
                                },
                                {
                                    offset: 1,
                                    color: '#000'
                                }
                            ])
                        },
                    }
                }
            }
        ]
    }
    function create() {
        const arr = [
            {
                radius: '50%',
                startAngle: -30,
                endAngle: 330,
                splitNumber: 3,
                length: 20,
            },
            {
                radius: '54%',
                startAngle: 0,
                endAngle: 360,
                length: 25,
                splitNumber: 3,
            },
            {
                radius: '58%',
                startAngle: 30,
                endAngle: 390,
                length: 30,
                splitNumber: 3,
            }, {
                radius: '62%',
                startAngle: 60,
                endAngle: 420,
                length: 35,
                splitNumber: 3,
            }, {
                radius: '65%',
                startAngle: 90,
                endAngle: 450,
                length: 40,
                splitNumber: 1,
            }];
        const originOpt = {
            type: 'gauge',
            center: ['50%', '50%'],
            axisLine: {
                show: false
            },
            axisTick: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: '#1459a3',
                },
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            itemStyle: {
                show: false
            },
            detail: {
                show: false
            },
            pointer: {
                show: false,
            }
        };
        arr.forEach((item) => {
            const obj = Object.assign({}, { ...originOpt }, {
                radius: item.radius,
                startAngle: item.startAngle,
                endAngle: item.endAngle,
                splitNumber: item.splitNumber,
            }, {
                axisTick: {
                    ...originOpt.axisTick,
                    length: item.length
                }
            });
            option.series.push(obj);
        })
    };
    create();
    return option;
}

export default opt;
export function handlerOptions(chart, newConfig) {
    if (newConfig && (Object.keys(newConfig).length !== 0)) {
        chart.setOption({ ...newConfig }, false);
        console.log(chart.getOption());
    }
}